import React, { Component } from 'react';
import './index.scss';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { redirect } from '../../redux/actions/global';
import { withRouter } from "react-router-dom";

class TabBar extends Component {
  render() {
    const { redirect, redirectData } = this.props;
    const pathname = this.props.location.pathname;
    return (
      <div className={redirectData.tabHide?'hide tabbar':'tabbar'}>
        <div
          className={'tab' + (pathname === '/'? ' cur': '')}
          onClick={redirect.bind(this, '/', 'none', false)}
        >首页</div>
        <div
          className={'tab' + (pathname === '/demo2'? ' cur': '')}
          onClick={redirect.bind(this, '/demo2', 'none', false)}
        >首页</div>
        <div
          className={'tab' + (pathname === '/demo3'? ' cur': '')}
          onClick={redirect.bind(this, '/demo3', 'none', false)}
        >首页</div>
        <div
          className={'tab' + (pathname === '/demo4'? ' cur': '')}
          onClick={redirect.bind(this, '/demo4', 'none', false)}
        >首页</div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    redirectData: state.redirect
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    redirect: bindActionCreators(redirect, dispatch)
  }
}

TabBar = connect(mapStateToProps, mapDispatchToProps)(TabBar)

export default withRouter(TabBar);
